<template>
  <div class="single-page">
    <div class="search-area">
      <LabelSelect labelName="一级类别：" v-model:selectedValue="selectedTypeValue" :selectOptions="typesOptions"
                   :inputWidth="10"
                   placeholder="请选择一级类别">
      </LabelSelect>
      <a-button class="margin-left_50" type="primary" @click="searchFunc">
        <template #icon>
          <SearchOutlined/>
        </template>
        查询
      </a-button>
    </div>
    <!-- 内容显示区域 -->
    <div class="content-area margin-top_20">
      <a-table :columns="columns" :data-source="dataSource" bordered class="adjust-table" size="middle"
               @change="handleTableChange"
               :pagination="pagination" :rowKey="(record: any) => record.id" :loading="state.loading">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'operations'">
            <div class="operations-style">
              <div class="margin-left_20">
                <a-typography-link
                    v-track="'点击项目类型编辑'"
                    @click="editFunc(record)">编辑</a-typography-link>
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 添加项目类别 -->
    <a-modal v-model:visible="state.isModalVisiable" title="编辑类别" @ok="editOkFunc">
      <LabelSelect labelName="一级类别：" v-model:selectedValue="editForm.subType" :selectOptions="typesOptions"
                   :inputWidth="20"
                   :isDisabled ="true"
                   placeholder="请选择一级类别">
      </LabelSelect>

      <LabelInput class="margin-bottom_20 margin-top_20" v-model:input-value="editForm.genresNew" labelName="二级类别："
                  :inputWidth="20"
                  placeholder="请输入二级类别"/>

    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {computed, inject, onMounted, reactive, ref} from 'vue';
import {message, TableColumnsType} from 'ant-design-vue';
import {post} from "@/service/request";


const reload: any = inject("reload");

onMounted(() => {
  // 获取导出记录
  handleTableChange();
});


const searchFunc = () => {
  pagination.current = 1

  handleTableChange();
}


const state = reactive({
  loading: false,
  isModalVisiable: false
})
// 搜索区域相关
const selectedTypeValue = ref<string>('');

const typesOptions = ref([
  {value: "电影", label: "电影"},
  {value: "电视剧", label: "电视剧"},
  {value: "综艺", label: "综艺"},
  {value: "动画", label: "动画"},
  {value: "纪录片", label: "纪录片"},
  {value: "短剧", label: "短剧"}
])

const selectedStyleValue = ref<string>('');

interface DataItem {
  id: number;
  key: string;
  subType: string;
  genres: string;
  nums: string,
}

const pagination = reactive({
  size: "small",
  showSizeChanger: true,
  position: ["bottomCenter"],
  hideOnSinglePage: true,
  current: 1,
  pageSize: 10,
  total: 0,
  onShowSizeChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
});

const dataSource = ref([] as DataItem[]);

const handleTableChange = () => {
  post(`/mediaExport/typePageList`, {
    "subType": selectedTypeValue.value
  }, {
    current: pagination.current,
    size: pagination.pageSize,
  }).then((res: any) => {
    if (res.errCode == 0) {
      let roleList = [];
      roleList = Object.assign(res.data.records);
      dataSource.value = roleList;
      pagination.total = res.data.total;
    }
  });
};

const editFunc = (record: any) => {
  const recordN = Object.assign(record);
  recordN.genresNew = recordN.genres;
  editForm.value = recordN;
  state.isModalVisiable = true;
}

const editForm = ref({
  genres: "",
  genresNew: "",
  nums: 0,
  subType: ""
});
const editOkFunc = () => {
  post(`/mediaExport/typeChange`, editForm.value).then((res: any) => {
    if (res.errCode == 0) {
      message.success("添加成功");
      state.isModalVisiable = false;
    } else {
      message.error(res.msg);
    }
    reload();
  });
}

const getSelectedStyle = ((value: any) => {
  selectedStyleValue.value = value;
})

// 表格相关
const columns = ref<TableColumnsType>([
  {
    title: '一级类别',
    dataIndex: 'subType',
    key: 'subType',
    resizable: true,
    width: 150,
    align: 'center',
  },
  {
    title: '二级类别',
    dataIndex: 'genres',
    key: 'genres',
    resizable: true,
    width: 150,
    minWidth: 100,
    maxWidth: 200,
    align: 'center',
  },
  {
    title: '项目数量',
    dataIndex: 'nums',
    key: 'nums',
    width: 100,
    resizable: true,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operations',
    key: 'operations',
    resizable: true,
    width: 60,
    fixed: 'right',
    align: 'center',
  },
]);

</script>
<style lang="less" scoped>
.single-page {
  .search-area {
    width: 100%;
    padding: 30px 10px 10px 10px;
    display: flex;
    justify-content: flex-start;
  }

  .add-area {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .content-area {
    width: 100%;
  }
}
</style>
<style lang="less" scoped>
@import "@/style/page.less";
</style>